<template>
  <div class="policy">
    <el-form label-position="top">
      <el-form-item label="告警是否需要重复通知">
        <el-radio-group class="n-flex" v-model="check">
          <div>
            <el-radio value="1">不需要重复通知，告警未恢复状态下只发送一次</el-radio>
            <div class="tip">告警只在产生时发送一次</div>
          </div>
          <div>
            <el-radio value="2" >
              <div>
                当告警未恢复时，每隔
                <el-input-number v-model="select"></el-input-number>小时
                <el-input-number v-model="select"></el-input-number>分钟
                进行重复通知
              </div>
            </el-radio>
          </div>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="告警是否配置升级策略">
        <el-radio-group class="n-flex" v-model="check">
          <div>
            <el-radio value="1">不配置升级策略</el-radio>
          </div>
          <div>
            <el-radio value="2" >
              <div>
                使用升级通知策略
                <bs-select style="width: 300px;" v-model="select"></bs-select>
              </div>
            </el-radio>
          </div>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="告警是否开启手动恢复">
        <el-radio-group class="n-flex" v-model="check">
          <div>
            <el-radio value="1">关闭</el-radio>
            <div class="tip">当告警事件在告警集成中设置的自动恢复时间内都没有再触发，告警将会自动恢复。</div>
          </div>
          <div>
            <el-radio value="2" >开启</el-radio>
            <div class="tip">当告警事件在告警集成中设置的自动恢复时间内都没有再触发，告警不会自动恢复，必须人工干预调整状态。</div>
          </div>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'

const check = ref()
const select = ref()

</script>
<style lang="scss" scoped>
.n-flex {
  display: block;
}
.tip {
  font-size: 12px;
  color: var(--gray-color);
}
</style>